import { useEffect, useState } from 'react' // 17.0 18.0
import { Layout, Space, Col, Row } from 'antd'
import { Outlet } from 'react-router-dom'
import { MenuSlider } from 'components'
import axios from 'axios'
import './style.scss'

const BaseLayout = () => {
  // useState 必须放置在顶部，且不能有条件判断
  const [routes, setRoutes] = useState<any[]>([])

  const fetchRoutes = async () => {
    // get请求如何携带请求头
    const res = await axios.get('http://localhost:3000/api/routes', {
      params: {},
      headers: {
        token: localStorage.getItem('token'),
      },
    })
    console.log('res:', res.data.data)
    setRoutes(res.data.data)
  }
  useEffect(() => {
    fetchRoutes()
  }, [])
  return (
    <Row className="row-container">
      <Col className="left-wrapper" span={6}>
        {/* 侧边栏 */}
        <MenuSlider routes={routes}></MenuSlider>
      </Col>
      <Col className="right-wrapper" span={18}>
        {/* 大的内容盒子 */}
        {/* 第一种排版 */}
        <Row>
          <Col>
            <Outlet></Outlet>
          </Col>
        </Row>

        {/* 第二种排版 */}
        {/* <Layout>
          <Header style={headerStyle}>Header</Header>
          <Content style={contentStyle}>
            <Outlet></Outlet>
          </Content>
          <Footer style={footerStyle}>Footer</Footer>
        </Layout> */}
      </Col>
    </Row>
  )
}

export default BaseLayout
